//Portal grid
/*
  In Mobile view (xxs + xs + sm breakpoints) all grid areas are stacked on top of each other and
  "mobilebar" is included additionally. For wider devices paBanner, jumpLinks and header areas
  occupy the whole width, while sidebar shares space with mainContainer. The mainContainer area
  is jsut a small grid itself including the rendered tool and the footer. 
*/
.portal-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto var(--portal-header-height) 1fr var(--portal-header-height);
  grid-template-areas:
      "paBanner"
      "jumpLinks"
      "header"
      "mainContainer"
      "mobilebar";
}

@include media-breakpoint-up(md) {

  .portal-container {
    grid-template-columns: var(--portal-nav-sidebar-width) 1fr;
    grid-template-rows: auto auto var(--portal-header-height) 1fr;
    grid-template-areas:
        "paBanner paBanner"
        "jumpLinks jumpLinks"
        "header header"
        "sidebar mainContainer";
    &.sidebar-collapsed {
      grid-template-areas:
          "paBanner paBanner"
          "jumpLinks jumpLinks"
          "header header"
          "mainContainer mainContainer";
    }
  }
  #portal-nav-sidebar {
    visibility: visible;
    box-shadow: none;
    transform: none;
    &.sidebar-collapsed {
      display: none;
    }
    a {
      text-decoration: none;
    }
  }
  .portal-jump-links {
    padding-left: var(--portal-nav-sidebar-width);
  }
}

.portal-pasystem {
  grid-area: paBanner;
}
.portal-header {
  height: var(--portal-header-height);
  grid-area: header;
  background-color: var(--top-header-background);
  border-bottom: 3px solid var(--sakai-border-color);
}

#loginForm input,
#loginForm button,
#loginForm .input-group-text {
  border-color: var(--top-header-text-color);
  color: var(--top-header-text-color);
}

@include media-breakpoint-up(md) {
  .portal-header .portal-header-breadcrumb {
      display: flex !important;
      margin: 0 1rem;
  }
  .portal-main-content .portal-header-breadcrumb {
      display: none !important;
  }
}

@include media-breakpoint-down(md) {
  .portal-header .portal-header-breadcrumb {
      display: none !important;
  }
  .portal-main-content .portal-header-breadcrumb {
      display: flex !important;
      margin-bottom: 1.5rem !important;
  }
}

.portal-header-breadcrumb {
  flex-wrap: wrap;
  gap: 0rem 0.5rem;
}

.portal-header-breadcrumb-separator,
.portal-header-breadcrumb > a,
.portal-header-breadcrumb-item > a {
  color: var(--sakai-text-color-2) !important;
}

.portal-header-breadcrumb-separator,
.portal-header-breadcrumb-item > a {
  text-decoration: none;
  font-weight: 600;
  &:hover {
    text-decoration: underline;
  }
}

.portal-header-breadcrumb-separator {
  font-size: 0.65em;
  flex-shrink: 0;
}

.portal-header-breadcrumb-item {
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-header-hamburger-button {
  color: var(--top-header-text-color) !important;
  &:hover,
  &:focus {
    border: solid 1px transparent !important;
    box-shadow: none !important;
  }
}
/* 
 * WARNING: This CSS uses deprecated properties because there's currently no alternative way
 * to achieve multi-line text truncation. 
 * These properties are:
 * - display: -webkit-box;
 * - -webkit-line-clamp: 2;
 * - -webkit-box-orient: vertical;
 * 
 * These may break in future browser versions, so monitor this and update if a more standardized 
 * approach becomes available.
 */
@include media-breakpoint-up(md) {
  .sidebar-site-title {
    width: 128px;
    display: -webkit-box;  /* Deprecated, but necessary for multi-line text truncation */
    -webkit-line-clamp: 2; /* Deprecated, but necessary for multi-line text truncation */
    line-clamp: 2;
    -webkit-box-orient: vertical;  /* Deprecated, but necessary for multi-line text truncation */
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    text-overflow: ellipsis;
    max-height: 47px; /* Fallback: Setting max-height as a fallback measure */
  }
}

@media #{$phone} {
  .sidebar-site-title {
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
  }
}

// Responsive header for mobile
@include media-breakpoint-down(md) {
  .portal-header {
    justify-content: space-between !important;
    box-shadow: none !important;
  }
}

@media screen and (max-width: 560px) {
  .portal-header-logo img {
    width: 26vw;
    height: auto;
  }

  .portal-main-container {
    display: block !important;
  }
}

#sakai-system-indicators {

  button {
    color: var(--top-header-text-color);
    span.bi {
      font-size: 22px;
    }
  }

  .sak-sysInd-account {
    border-radius: 30px;
  }

  .sakai-accountProfileImage {
    width: 30px;
    min-width: 30px;
  }
}

.sakai-accountProfileImage {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.portal-main-content {
  outline: none;
}

.portal-main-container {
  grid-area: mainContainer;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

#sakai-account-panel {
  #sakai-profile-image-block > button {
    border: 1px transparent;
    #sakai-profile-image-change {
        display: none;
    }
    &:hover, &:focus {
      #sakai-profile-image-change {
          display: block;
      }
    }
    &:focus {
      outline: 1px solid;
    }
  }
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sakak-breadcrumb-color);
}

.search-result-link {

  &:focus, &:hover {
    text-decoration: none;

    .card {
      background-color: var(--button-primary-active-background);
      color: var(--button-primary-active-text-color);
    }
  }
}

.portal-footer {
  .copyright-powered {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: right;
    }
  }
}
.portal-mobilebar {
  grid-area: mobilebar;
  position: sticky;
  bottom: 0;
  z-index: 1050;
  color: white;
  button, a {
    color: white;
    span.bi {
      font-size: 24px;
    }
  }
}
.portal-jump-links {
  grid-area: jumpLinks;
}
.portal-jump-links a {
  color: #fff;
}
#xlogin-logo {
  height: calc(var(--portal-header-height) * 2);
  display: flex;
  align-items: center;
  justify-content: center;

  .portal-header-logo {
    height: var(--portal-header-height);
  }
}
#sakai-login-dialog .alert {
  margin-right: 1rem;
  margin-left: 1rem;
}
@include media-breakpoint-up(md) {
  .portal-header {
    .portal-header-logo {
      width: fit-content;
      min-width: fit-content;
      background: var(--top-header-background-logo);
      border-right: solid 1px var(--top-header-border-color);
    }
  }
}
.portal-header-logo .btn-logo {
  background-image: var(--logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  max-height: var(--logo-height);
  min-height: var(--logo-height);
  width: var(--logo-width);
}
.portal-header-logo .btn:hover {
  border-color: transparent !important;
}

.portal-user-role {
  color: var(--sakai-text-color-2);
}

.portal-notifications-button {
  position: relative;
}
.portal-notifications-indicator {
  position: absolute;
  top: 10px;
  right: 20%;
  color: var(--sakai-primary-color-1);
  background: red;
}

.sakai-sitesAndToolsNav .active .list-group-item-action {
  font-weight: 700;
  color: #fff;
}

.portal-footer .nav-link {
  padding-top: 0;
  padding-bottom: 0;
}

@mixin focus-outline($color) {
  &:focus {
    box-shadow: 0 0 0 $input-focus-width rgba($color, .5);
  }
}

@each $color, $value in $theme-colors {
  .focus-#{$color} {
    @include focus-outline($value);
  }
}

.btn-sidebar-collapse, .btn-logo-button {
  border: none;
  @include button-variant($primary, $light);

  > span {
    font-size: 28px;
  }
}

.modal-content {
  background: var(--sakai-modal-content-bg);
  .modal-header {
    background: var(--sakai-modal-header-bg);
    color: var(--sakai-modal-header-color);
    .btn-close {
      background-color: var(--sakai-modal-close-btn-bg);
    }
  }
}

#sakai-login-dialog .modal-header {
  background: var(--sakai-modal-content-bg);
  color: var(--sakai-text-color-1);
}

.wicket-modal .w_caption {
  cursor: move;
  background: var(--sakai-modal-header-bg) !important;
  color: var(--sakai-modal-header-color) !important;
}

.portal-nav-sidebar-icon {
  &::before {
    content: "\f479";
  }
  &:hover::before {
    content: "\f1c2";
  }
}

.portal-nav-sidebar-icon-collapsed {
  &::before {
    content: "\f479";
  }
  &:hover::before {
    content: "\f1c3";
  }
}

.portal-nav-sidebar-icon-hover {
  &::before {
    content: "\f1c2";
  }
}

#portal-nav-sidebar {

  grid-area: sidebar;

  .si-pin {
    &:hover::before,
    &:focus::before {
      content: "\f4ec";
    }
  }

  .si-pin-fill {
    color: var(--sakai-pin-hover-color);
    &:hover::before,
    &:focus::before {
      content: "\f4ed";
    }
  }

  .si-eye-slash-fill {
    color: var(--sakai-text-color-1)
  }

  li.site-list-item {
    border: solid 1px var(--sakai-border-color) !important;
    border-radius: 4px;

    .site-list-item-head {
      button {
        border: solid 1px transparent;
        &:hover,
        &:focus {
          border: solid 1px transparent;
          color: var(--site-nav-btn-color);
        }
      }

      > button {
        color: var(--sakai-pin-color);
      }

      .si-pin {
        button {
          border: solid 1px transparent;
          &:focus, &:hover {
            border: solid 1px transparent;
          }
        }
      }

      &:hover {
        .si-pin, a, button {
          color: var(--site-nav-btn-hover-color);
          text-decoration: underline;
        }
      }
    }

    &.is-current-site {

      background-color: var(--sakai-current-site);
      border-radius: 4px;
      border: solid 2px var(--sakai-curent-site-border-color) !important;

      &#site-list-gateway-item-gateway {
        border: none !important;
        padding: 0 !important;
      }

      a, button {
        color: var(--sakai-current-site-color);
      }

      .site-list-item-head {
        .si-eye-slash-fill {
          color: var(--sakai-selected-page-color);
        }

        button {
          border: 0px;
          &:focus, &:hover {
            border: 0px !important;
          }
        }

        &:hover {
          opacity: 1.0;
          color: var(--sakai-current-site-color);
          .si-pin, a , button {
            color: var(--sakai-current-site-color);
          }
        }
      }
    }
  }

  .btn-nav,
  .btn-site-opt {
    @include button-variant($white, $black);
    --bs-btn-color: var(--site-nav-btn-color);
    --bs-btn-bg: var(--site-nav-btn-bg);
    --bs-btn-border-color: var(--site-nav-btn-border-color);
    --bs-btn-hover-color: var(--site-nav-btn-hover-color);
    --bs-btn-hover-bg: var(--site-nav-btn-hover-bg);
    --bs-btn-hover-border-color: var(--site-nav-btn-hover-border-color);
    --bs-btn-focus-shadow-rgb: 249, 250, 251;
    --bs-btn-active-color: var(--site-nav-btn-active-color);
    --bs-btn-active-bg: var(--site-nav-btn-active-bg);
    --bs-btn-active-border-color: var(--site-nav-btn-active-border-color);
    --bs-btn-disabled-color: var(--site-nav-btn-disabled-color);
    --bs-btn-disabled-bg: var(--site-nav-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--site-nav-btn-disabled-border-color);
    --bs-btn-focus-shadow-rgb: 38, 88, 129;
    &:hover {
      --bs-btn-color: var(--site-nav-btn-active-color);
    }
  }

  .sites-section-heading {
    @extend .mb-0, .pb-2, .pt-3, .ps-3;
    font-size: 16px;
    color: var(--site-nav-color);
  }

  .sakai-sitesAndToolsNav {
    padding-bottom: 96px;
    overflow-y: scroll;
    position: sticky;
    top: 0;
  }

  .btn-nav {
    color: var(--site-nav-btn-color);
    &:hover,
    &:focus {
      box-shadow: none;
      border: solid 1px var(--site-nav-btn-page-hover-border);
      border-radius: 4px;
      color: var(--site-nav-btn-page-hover-color) !important;
      background-color: transparent;
    }

    &.selected-page {
      background-color: var(--sakai-selected-page-bg-color);
      color: var(--sakai-selected-page-color) !important;
      border: solid 1px var(--site-nav-btn-page-hover-border);
      border-radius: 4px;
      &:hover,
      &:focus {
        box-shadow: none;
        border: solid 1px var(--site-nav-btn-page-hover-border);
        border-radius: 4px;
        color: var(--site-nav-btn-page-hover-color) !important;
        background-color: transparent;
      }
    }

    span {
      margin-left: 5px;
    }
  }

  .btn-site-carret {
    &::before {
      display: inline-flex;
      width: 1.25em;
      margin-inline-end: 0.25rem;
      line-height: 0;
      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
      transition: transform 0.35s ease;
      transform-origin: 0.5em 50%;
      @extend .bi;
    }
  }

  .btn-subsite {
    &[aria-expanded="true"] .btn-site-carret::before {
      transform: rotate(90deg);
    }
  }

  &.portal-nav-sidebar-mobile {
    .btn-site-opt {
      color: var(--sakai-text-color-dimmed);
    }
  }

  .fa-tool-menu-icon {
    margin-top: 5px;
  }
}

.site-list-item .site-link-block .img_site_toolmenu {
  max-height: 1.2em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.site-opt-pin {
  color: var(--sakai-pin-hover-color);
}

.sakai-sitesAndToolsNav * {
  text-decoration: none;
}

#create-task {
  @media (max-width: 460px) {
    width: 100%;
  }
}

/*
  Offcanvas bs style
*/
@include media-breakpoint-down(md) {

  .offcanvas {
    --bs-offcanvas-padding-x: 2rem;
    --bs-offcanvas-padding-y: 2rem;
    --bs-offcanvas-width: 100%;
  }

  // make offcanvas header match Sakai's header:
  .offcanvas-header {
    height: var(--portal-header-height);
  }

  .offcanvas-header .btn-close {
    padding: calc(var(--bs-offcanvas-padding-y)* 0.25) calc(var(--bs-offcanvas-padding-x)* 0.25);
    margin: 0px;
  }

  #portal-nav-sidebar .sakai-sitesAndToolsNav {
    padding-right: calc(var(--bs-offcanvas-padding-x) - 1rem);
    padding-left: calc(var(--bs-offcanvas-padding-x) - 1rem);
    padding-top: calc(var(--bs-offcanvas-padding-y) - 1rem);
    padding-bottom: calc(var(--bs-offcanvas-padding-y) - 1rem);
  }
}

@include media-breakpoint-up(md) {

  .offcanvas {
    margin: 1.5rem 2.5rem 1rem 1rem;
    border-radius: 6px 6px 4px 4px;
  }

  .offcanvas-header {
    border-radius: 4px 4px 0 0;
  }

  .offcanvas-body {
    border-bottom: solid 1px var(--sakai-border-color);
    border-left: solid 1px var(--sakai-border-color);
    border-right: solid 1px var(--sakai-border-color);
    border-radius: 0 0 4px 4px;
  }
}

.offcanvas {
  background-color: var(--sakai-background-color-1);

  .offcanvas-header {
    flex-shrink: 0;
    background-color: var(--sakai-offcanvas-header-bg);
    color: var(--sakai-offcanvas-header-color);

    .btn-close {
      background-color: var(--sakai-offcanvas-close-btn-bg);
      margin-right: 0;
    }

    .offcanvas-title {
      margin: 0;
      font-size: 16px;
    }
  }
}

// change offcanvas close button's colour to white:
.offcanvas-header .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.offcanvas-start,
.offcanvas-end {
  border: none !important;
}

// for narrow views, take up the full width of the screen:
@media (max-width: $offcanvas-horizontal-width) {

  .offcanvas-start,
  .offcanvas-end {
    max-width: 100vw;
  }
}

@include media-breakpoint-down(md) {

  .offcanvas-start,
  .offcanvas-end {
    bottom: var(--portal-header-height);
  }
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  background-color: var(--sticky-footer-bg);
  color: var(--sticky-foooter-color);
  border-top: solid 1px var(--sakai-border-color);

  &:hover {
    background-color: var(--sticky-footer-bg);
    color: var(--sticky-foooter-color-hover);
  }

  @include media-breakpoint-down(md) {
    background-color: var(--sakai-background-color-5);
    padding-left: var(--bs-offcanvas-padding-x) !important;
    padding-right: var(--bs-offcanvas-padding-x) !important;
  }
}

.minimised {
  width: fit-content;
}

.portal-nav-sidebar {
  overflow-y: hidden !important;
  border-right: solid 1px var(--sakai-border-color);
  & a,
  & button {
    color: var(--site-nav-btn-color);
  }
}

.toast-header {
  color: var(--sakai-text-color-1);
  background-color: var(--sakai-background-color-3);
}

.toast-body {
  color: var(--sakai-text-color-1);
  background-color: var(--sakai-background-color-2);
}
